<template>
  <div class="collection">
    <!--    顶部返回按钮-->
    <div class="head_return" @click="headReturn"></div>

    <!-- 内容区 -->
    <div class="collection_con">
      <div class="collec_tit" v-if="pageType === 'collection'">收藏夹</div>
      <div class="collec_tit" v-else>错题库</div>
      <div class="collec_list topic_con_scroll">
        <div class="collec_items" v-for="item in 18" :key="item" @click="goToCollectionList">
          <div class="items_tit">题量 3</div>
          <img src="../../assets/image/collection/file.png" alt="" />
          <span>阅读广度</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 页面 默认 收藏夹页面
      pageType: ''
    };
  },
  methods: {
    // 返回上一页
    headReturn() {
      this.$router.go(-1);
    },
    // 前往列表页
    goToCollectionList(){
      this.$router.push({
        path: '/collectionlist',
        query:{type: this.pageType}
      })
    }
  },
  watch:{
    pageType(type){
      if(type === 'collection'){
        document.title = '收藏夹'
      }else if (type === 'wrong'){
        document.title = '错题库'
      } 
    }
  },
  created(){
    this.pageType = this.$route.query.type
  } 
};
</script>

<style lang="less" scoped>
.collection {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url("../../assets/image/collection/collectionback.png") no-repeat;
  background-size: 100% 100%;

  .head_return {
    position: absolute;
    z-index: 10;
    top: 0.3rem;
    left: 0.4rem;
    width: 0.7rem;
    height: 0.7rem;
    background: url("../../assets/image/lesson/return.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;

    & > img {
      width: 100%;
      height: 100%;
    }
  }

  .collection_con {
    padding: 1.41rem 0.95rem;
    position: relative;
    margin: 0.93rem auto 0 auto;
    width: 16.71rem;
    height: 8.93rem;
    font-size: 0.18rem;
    color: #333;
    background: url("../../assets/image/collection/collecbox.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    .collec_tit {
      position: absolute;
      left: 0.4rem;
      top: 0.15rem;
      font-size: 0.21rem;
      color: #fff;
    }
    .collec_list {
      display: flex;
      flex-wrap: wrap;
      .collec_items {
          position: relative;
        margin: 0 1.2rem 1.2rem 0;
        width: 2.01rem;
        text-align: center;
        cursor: pointer;
        & > img {
          margin-bottom: 0.2rem;
          width: 100%;
          height: 1.6rem;
        }
        .items_tit{
            position: absolute;
            left: 0.18rem;
            top: 0.06rem;
            color: #fff;
        }
      }
    }
    .topic_con_scroll {
      height: 100%;
      overflow-y: scroll;
      //火狐浏览器隐藏滚动条
      & {
        scrollbar-color: #5b6fcf #fff;
        scrollbar-width: thin;
        scrollbar-track-color: transparent;
        -ms-scrollbar-track-color: transparent;
      }

      /* 设置滚动条的样式 谷歌  */

      &::-webkit-scrollbar {
        width: 12px;
      }

      /* 滚动槽 */

      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset006pxrgba(223, 224, 229);
        border-radius: 10px;
      }

      /* 滚动条滑块 */

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(158, 176, 230);
        -webkit-box-shadow: inset006pxrgba(158, 176, 230);
      }

      &::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(229, 226, 217);
      }
    }
  }
}
</style>